<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
  <head>
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" charset="utf-8"/>
	<link rel="stylesheet"  href="resources/css/bootstrap.css" ></link>
	<link rel="stylesheet"  href="resources/css/bootstrap-fileupload.css" ></link>
   	<link rel="stylesheet" href="resources/css/ui-lightness/jquery-ui-1.10.3.custom.css">
   	<link rel="stylesheet" href="resources/css/style.css">
   	<link rel="stylesheet" href="resources/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3kOYMhNbartGm75c_O2XioYUTnbiEsu4&sensor=true&libraries=drawing,places"></script>    
  	<script src="resources/js/model/AppController.js"></script>
    <script src="resources/js/model/Comment.js"></script>
    <script src="resources/js/model/User.js"></script>
    <script src="resources/js/model/Blog.js"></script>
    <script src="resources/js/model/Room.js"></script>    
    <script src="resources/js/model/Map.js"></script>   
    <title>Microblogging</title>
  </head>
  <script src="resources/js/jquery-1.10.2.js"></script>
  <script src="resources/js/jquery-ui-1.10.3.custom.js"></script>
  <script type="text/javascript" src="resources/js/jquery.mousewheel-3.0.6.pack.js"></script>
  <script type="text/javascript" src="resources/js/jquery.fancybox.pack.js?v=2.1.5"></script>
  <script src="resources/js/bootstrap.min.js"></script>
  <script src="resources/js/bootstrap-fileupload.min.js"></script>
  <script type="text/javascript" src="resources/js/jquery.json-2.3.min.js"></script>
  <script type="text/javascript" src="resources/js/sync.js"></script>
   <body>
	<script>
	var app=new AppController();
	app.init();
	google.maps.event.addDomListener(window, 'load', initialize);
	$(document).ready(function(){
		$("#buttonI").click(function(){
			$("#panelI").toggle("slide");
		});
		$("#buttonD").click(function(){
		    var options = { direction: 'right' };
		    $('#panelD').toggle('slide', options,700);
		});
		$("#myPosition").click(function(){
			setMyPosition();
			/*
			var pos=app.user.myLocation.getPosition();
			if(confirm("Are you sure you want publish your position?")){
				app.currentRoom.publishMyPosition($("#userName").val(),pos.lat(),pos.lng());
			}else
				return;	        
			*/
		});
		$("#publish").click(function(){
			if($("#title").val()==''){
				alert("Please add a title.");
				return;
			}
			var files=[];
			var i=0;
			$('.files').each(function(){
				  files[i++]=$(this).find("img").attr("src");
				});

			if($("#blogId").val()=='circle')
				app.currentRoom.publishBlogCircle(files);
			else if($("#blogId").val()=='rectangle')
				app.currentRoom.publishBlogRectangle(files);
			else if($("#blogId").val()=='polyline')
				app.currentRoom.publishBlogPolyline(files);
			else if($("#blogId").val()=='polygon')
				app.currentRoom.publishBlogPolygon(files);
			else if($("#blogId").val()=='marker')
				app.currentRoom.publishBlog(files);
			$.ajax({
				type: "POST",
				url: "publish",
				data: "blogId=" +$("#blogId").val()+
				"&title="+$("#title").val()+
				"&userName="+$("#userName").val(),
				success: function(response){
				// we have the response
				//alert(response);
				},
				error: function(e){
				alert('Error: ' + e);
				}
			});
		});
		$("#delete").click(function(){
			if(confirm("Are you sure you want to delete this blog?")){
				app.currentRoom.deleteOverlay($("#blogId").val());
				resetField();
			}else
				return;
		});
		$("#addComment").click(function(){
			if($("#comment").val()==''){
				alert("Please add a comment.");
				return;
			}
			var time=getTime();
			app.currentRoom.addCommentRoom($('#blogId').val(),$('#comment').val(),$('#userName').val(),time);
			$('#comment').val('');
		});
		
		$("#addMedia").click(function(){
			$("#media").html($("#media").html()+
			"<div class='fileupload fileupload-new' data-provides='fileupload'>"+
			"<div class='fileupload-new thumbnail' style='width: 50px; height: 50px;'><img src='resources/images/font50x50.gif' /></div>"+
			  "<div id='preview' class='fileupload-preview fileupload-exists thumbnail files' style='width: 50px; height: 50px;'></div>"+
			  "<span class='btn btn-default btn-file'><span class='fileupload-new'>Select image</span><span class='fileupload-exists'>Change</span><input type='file' id='files' name='files[]'/></span>"+
			  "<a href='#' class='btn btn-default fileupload-exists' data-dismiss='fileupload'>Remove</a>"+
			"</div>");
		});
		$("#likeButton").click(function(){
			var blogId=$('#blogId').val();
			app.currentRoom.addLike(blogId);
			$("#likes").val(loadBlog(blogId).likes);
		});
		$("#dislikeButton").click(function(){
			var blogId=$('#blogId').val();
			app.currentRoom.addDislike(blogId);
			$("#dislikes").val(loadBlog(blogId).dislikes);
		});
		$("#search").click(function(){
			if($("#googleSearch").css("display")=='block'){
				$("#googleSearch").hide();
				$("#localSearch").show();
			}else{
				$("#googleSearch").show();
				$("#localSearch").hide();
				$("#matchingList").hide();
			}
		});
		$("#suitcase").click(function(){
			app.currentRoom.myBlogs($("#userName").val());
			$("#matchingList").show();
		});
		$("#doSearch").click(function(){
			if($("#txt").val()==''){
				alert("Please insert any text.");
				$("#matchingList").html("");
				return;
			}			
			app.currentRoom.doSearch($("#txt").val());
			$("#localSearch").show();
			$("#matchingList").show();
		});
		$("#buttonList").click(function(){
			alert("asd");
		});
		
		$(".fancybox").fancybox();
	});
	$(document).on('click','.close',function(){
	    $(this).parent().hide();
	});
	$(document).on('click','.buttonList',function(){
	    app.currentRoom.goToBlog($(this).val());
	});
	</script>
		<div id="panelI">
			<button id="myPosition" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-screenshot"></span>
			</button><br/>
			<button id="suitcase" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-folder-open"></span>
			</button><br/>
			<button id="search" type="button" class="btn btn-default btnPanel">
		  		<span class="glyphicon glyphicon-search"></span>
			</button>
		</div>
		<div id="buttonI">
			<button id="bI" type="button" class="btn btn-default">
			  	<span class="glyphicon glyphicon-chevron-right"></span>
			</button>
		</div>
		<div class="input-group search" id="googleSearch">
		  	<input type="text" id="searchTextField" class="form-control input search-input" placeholder="Type any place or address" size="1">
		</div>
		<div id="localSearch" class="input-group search">
			<table>
				<tr><td width="100%"><input id="txt" type="text" class="form-control input search-input" placeholder="Type any text" size="1"></td>
				<td><button id="doSearch" type="button" class="btn btn-primary btn-sm">Search</button></td></tr>		  
			</table>
		</div>
		<div id="matchingList" class="overlay btn-group-vertical"></div>
		<div id="buttonD">
			<button id="bD" type="button" class="btn btn-default">
			  	<span class="glyphicon glyphicon-chevron-left"></span>
			</button>
		</div>
		<div id="panelD" class="input-group login">
			<input id="userName" type="hidden" value="${name}">
			<div class="alert alert-info welcome">
			    <c:out value="Hi ${name} "></c:out><a href="<c:url value="/signout" />" class="signOut">Sign out</a>
			</div>
			<input id="blogId" type="hidden">
			<div class="hora center" id="score"></div>
		 	<span class="input-group-addon">Title</span>
  			<input id="title" type="text" class="form-control" placeholder="Add a title">
  			<span class="input-group-addon">Description</span>
  			<textarea id="description" class="form-control" placeholder="Add a description"></textarea>
  			<div class="hora center" id="publishTime"></div>
  			<span class="input-group-addon">Media</span>
			<div id="media" class="media">
				<div class='fileupload fileupload-new' data-provides='fileupload'>
				<div class='fileupload-new thumbnail' style='width: 50px; height: 50px;'><img src='resources/images/font50x50.gif' /></div>
				  <div id="preview" class='fileupload-preview fileupload-exists thumbnail files' style='width: 50px; height: 50px;'></div>
				  <span class='btn btn-default btn-file'><span class='fileupload-new'>Select image</span><span class='fileupload-exists'>Change</span><input type='file' id="files" name="files[]"/></span>
				  <a href='#' class='btn btn-default fileupload-exists' data-dismiss='fileupload'>Remove</a>
				</div>
			</div>
  			<div id="mediaButton" class="center">
	  			<button id="addMedia" type="button" class="btn btn-default">
			  		<span class="glyphicon glyphicon-plus-sign"></span>
				</button>
				<button id="deleteMedia" type="button" class="btn btn-default">
			  		<span class="glyphicon glyphicon-minus-sign"></span>
				</button>
			</div>
			<span class="input-group-addon">Action</span>
			<div id="actionButton" class="center">
				<button id="publish" class="btn btn-default">Publish</button>
				<button id="delete" class="btn btn-default">Delete</button><br/>
			</div>
			<div id="socialButton" class="center">
				<button id="likeButton" type="button" class="btn btn-default btn-s">
				  <span class="glyphicon glyphicon-thumbs-up"></span>
				</button><input type="text" id="likes" class="inputSocial" size="1" disabled>
				<button id="dislikeButton" type="button" class="btn btn-default btn-s">
				  <span class="glyphicon glyphicon-thumbs-down"></span>
				</button><input type="text" id="dislikes" class="inputSocial" size="1" disabled>
			</div>
			<span class="input-group-addon">Comments</span>
			<div id="div-comment" class="div-comment">
				<div id="listComments">				
					<div id="comments"></div>		
				</div>
				<div id="addCommentArea" class="center">
					<textarea id="comment" class="form-control" placeholder="Add a comment"></textarea>
					<button id="addComment" class="btn btn-default">Add</button>
				</div>	
			</div>			
		</div>
		<!-- 
		<div class="ui-widget alertNewMessage">
			<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<strong>Hey!</strong> Has been added a new comment.</p>
			</div>
		</div> 
		-->
		<div id="map-canvas"></div>
  </body>
</html>